<script setup>
import { CollectionTag, Coin, Orange, UserFilled, Tickets, StarFilled, SwitchButton } from '@element-plus/icons-vue'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()

const router = useRouter()
const activeIndex = ref('/bookInfo')
onMounted(() => {
    activeIndex.value = route.path
})
const out = () => {
    localStorage.removeItem('loginStore')
    router.push('/login')
    ElMessage({
        type: 'success',
        message: '退出登录'
    })
}
</script>
<template>
    <el-container class="layout-container-demo" style="height: 500px">
        <el-aside width="300px" class="aside">
            <div class="title">逐火书城</div>
            <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu"
                :default-active="activeIndex" text-color="#fff" router>
                <el-menu-item index="/bookInfo">
                    <el-icon>
                        <CollectionTag />
                    </el-icon>
                    <span>书籍管理</span>
                </el-menu-item>
                <el-menu-item index="/typeInfo">
                    <el-icon>
                        <Coin />
                    </el-icon>
                    <span>书籍类型管理</span>
                </el-menu-item>
                <el-menu-item index="/hotInfo">
                    <el-icon>
                        <StarFilled />
                    </el-icon>
                    <span>热门管理</span>
                </el-menu-item>
                <el-menu-item index="/bannerInfo">
                    <el-icon>
                        <Orange />
                    </el-icon>
                    <span>轮播图管理</span>
                </el-menu-item>
                <el-menu-item index="/orderInfo">
                    <el-icon>
                        <Tickets />
                    </el-icon>
                    <span>订单管理</span>
                </el-menu-item>
                <el-sub-menu index="">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span>用户/员工管理</span>
                    </template>
                    <el-menu-item index="/userInfo">用户管理</el-menu-item>
                    <el-menu-item index="/empInfo">员工管理</el-menu-item>
                </el-sub-menu>
                <el-menu-item index="" @click="out">
                    <el-icon>
                        <SwitchButton />
                    </el-icon>
                    <span>退出登录</span>
                </el-menu-item>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header class="header">电商管理平台</el-header>
            <el-main class="main">
                <el-scrollbar>
                    <router-view></router-view>
                </el-scrollbar>
            </el-main>
        </el-container>
    </el-container>
</template>
<style scoped lang="scss">
.aside {
    width: 300px;
    height: 100vh;
    background-color: #545c64;

    .title {
        width: 300px;
        height: 58px;
        line-height: 58px;
        color: white;
        text-align: center;
        font-weight: 600;
        font-size: 18px;
        letter-spacing: 8px;
        background-color: #3C3C3C;
    }
}

.header {
    background-color: #3C3C3C;
    height: 58px;
    color: white;
    text-align: center;
    line-height: 58px;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 8px;
}

.main {
    min-height: 93vh;
    background-color: white;
}
</style>